<template>
  <div>
    <div
      style="color: white;font-size: 22px;position: absolute;top: 115px;left: 67px;"
      @click="$router.push({path: '/Other'})"
      :class="filterBlur ? 'filterBlur' : ''"
    >
      <van-icon name="arrow-left" />
      <span style="position: absolute;width: 100px;top: -5px;left: 40px;">其他资讯</span>
    </div>
    <div align="center">
      <div class="left" @click="onSwipeRight">
        <van-icon name="arrow-left" />
      </div>
      <div class="right" @click="onSwipeLeft">
        <van-icon name="arrow" />
      </div>
      <div
        style="position: absolute;top: 165px;left: 66px;right: 66px;"
        :class="filterBlur ? 'filterBlur' : ''"
      >
        <van-row gutter="40" class="a-fadeinL">
          <div v-for="(item,index) in list" :key="index">
			  <van-col span="6">
            <img
              :src="item.journalismUrl"
              style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;width: 267px;height: 173px;"
            />
          </van-col>
          <van-col span="6">
            <div style="width: 267px;height: 173px;text-align: left;">
              <span style="color: white;font-size: 20px;">{{item.title}}</span>
              <p class="content"
                style="color: white;font-size: 16px;padding-top: 15px; height:99px" v-html="item.content"
              ></p>
              <p class="mt10">
                <span class="more" @click="clickMore(item.id)">查看更多</span>
              </p>
            </div>
          </van-col>
		  </div>
        </van-row>
        <van-row gutter="40" class="a-fadeinL" style="padding-top: 40px;">
         <div v-for="(item,index) in list2" :key="index">
			  <van-col span="6">
            <img
              :src="item.journalismUrl"
              style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;width: 267px;height: 173px;"
            />
          </van-col>
          <van-col span="6">
            <div style="width: 267px;height: 173px;text-align: left;">
              <span style="color: white;font-size: 20px;">{{item.title}}</span>
              <p class="content"
                style="color: white;font-size: 16px;padding-top: 15px; height:99px" v-html="item.content"
              ></p>
              <p class="mt10">
                <span class="more" @click="clickMore(item.id)">查看更多</span>
              </p>
            </div>
          </van-col>
		  </div>
        </van-row>
      </div>
      <div class="mark" v-show="isMore" :class="isfade ? 'a-fadein' : 'a-fadeout'"></div>
      <div
        class="dialog_remove a-fadein"
        v-show="isMore"
        @click="clickRemove"
        :class="isfade ? 'a-fadein' : 'a-fadeout'"
      >
        <van-icon name="cross"></van-icon>
      </div>
      <div class="dialog" v-show="isMore" :class="isfade ? 'a-fadein' : 'a-fadeout'" align="left">
        <div class="dialog_content">
        <p v-html="content"></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let _this;
export default {
  name: "News",
  data() {
    return {
      isMore: false,
      filterBlur: false,
      isfade: "",
	  list: [],
	  list2:[],
	  current : 1,
	  size:4,
	  content:'',
	  page:''
    };
  },
  beforeCreate() {
    // 创建 vue 实例之前
    _this = this;
  },
  watch: {},
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
			let params = {
			size:this.size, //每页条数
			current:this.current //页码
		}
      this.$http.get("information/journalism",{
		  params:params
	  }).then(res => {
        if (res.data.code == 200) {
            this.list = res.data.data.records;
            this.list = this.list.splice(0,2)
            this.list2 = res.data.data.records;
            this.page = res.data.data.pages;		  
        } else if (res.code == 500) {
          this.$notify(res.msg);
        }
      });
	},
  onSwipeLeft() { // 左滑
        if(this.current == this.page) {
				this.$notify('无更多');
				return false;				
			}
				this.current ++;
				this.getList();
			},
  onSwipeRight() { // 右滑
  if(this.page <=1) {
				return false;
			}
				this.current --;
				this.getList();
			},
    clickMore(id) {
		 this.$http.get("information/selectJournalismContentById/"+id).then(res => {
        if (res.data.code == 200) {

				  this.content = res.data.data
        } else if (res.code == 500) {
          this.$notify(res.msg);
        }
      });
      this.isMore = true;
      this.filterBlur = true;
      this.isfade = true;
    },
    clickRemove() {
      this.isfade = false;
      setTimeout(() => {
        this.filterBlur = false;
      }, 500);
      setTimeout(() => {
        this.isMore = false;
      }, 1000);
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .van-icon {
  font: 24px/1 "vant-icon";
}

/deep/ .van-row {
  margin-right: 0 !important;
}

.left /deep/ .van-icon {
  font: 48px/1 "vant-icon";
  color: rgb(56, 107, 146);
}

.left {
  position: absolute;
  top: 230px;
  left: 10px;
}

.right /deep/ .van-icon {
  font: 48px/1 "vant-icon";
  color: rgb(53, 86, 114);
}

.right {
  position: absolute;
  top: 450px;
  left: 10px;
}

.mt10 {
  margin-top: 20px;
}

.more {
  color: white;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  padding: 4px 25px;
}
 .content{
         display: block;
    display: -webkit-box;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	
	line-height: 27px;
    }
.mark {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
  position: absolute;
}

.dialog {
  position: absolute;
  width: 80%;
  height: 61.5vh;
  z-index: 10;
  background: #2d3a4f;
  top: 20%;
  left: 10%;
  transform: translat(calc(-50% + 0.5 px), calc(-50% + 0.5 px));
  border-radius: 20px;
  font-size: 18px;
  color: #ffffff;
  overflow-x: auto;
  padding: 25px 10px;
  text-indent: 2rem;
  letter-spacing: 2px;
  line-height: 30px;
  .dialog_content {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding: 0px 30px;
  }
}

.dialog_remove {
  position: absolute;
  left: 8%;
  top: 17%;
  font-size: 18px;
  color: #000000;
  background: #a3a7ab;
  width: 26px;
  height: 26px;
  text-align: center;
  justify-content: center;
  padding-top: 2px;
  border-radius: 50%;
  z-index: 10;
}

.filterBlur {
  filter: blur(5px);
}
</style>